<template>
  <div>
    <el-row type="flex" justify="end">
      <el-button
        type="primary"
        plain
        class="btn"
        @click="createMenu('create', 0)"
        >创建菜单</el-button
      >
    </el-row>

    <el-table
      :data="menuList"
      border
      style="width: 100%"
      row-key="id"
      :tree-props="prop"
    >
      <el-table-column prop="permission_name" label="菜单名称" width="200">
      </el-table-column>
      <el-table-column prop="route" label="菜单地址" width="200">
      </el-table-column>
      <el-table-column prop="permission_mark" label="权限标识" width="240">
      </el-table-column>
      <el-table-column prop="icon" label="图标" width="80">
        <template slot-scope="{ row }">
          <!-- 根据当前状态来确定 是否打开开关 -->
          <svgIcon v-if="row.icon" :iconClass="row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="component" label="组件路径" width="240">
      </el-table-column>
      <el-table-column label="是否显示" width="80">
        <template slot-scope="{ row }">
          <!-- 根据当前状态来确定 是否打开开关 -->
          <el-switch @change="changeSwitch(row)" :value="row.hidden === 1" />
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="240">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140">
        <template slot-scope="{ row }">
          <el-button
            @click="createMenu('change', row)"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            @click="createMenu('edit', row)"
            size="mini"
            type="warning"
            icon="el-icon-plus"
            circle
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="delMenu(row)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <menuDialog ref="dialog" @initData="getMenu()" />
  </div>
</template>

<script>
import menuDialog from "./components/menuDialog.vue";
import svgIcon from "@/components/SvgIcon";
import { getMenu, getEditMenu, isShowMenu, delMenu } from "@/api/permission";
export default {
  name: "menu",
  data() {
    return {
      menuList: [],
      prop: {
        label: "permission_name",
        children: "children",
      },
    };
  },
  components: {
    svgIcon,
    menuDialog,
  },
  created() {
    this.getMenu();
    // console.log(svgIcon);
  },
  methods: {
    async getMenu() {
      const data = await getMenu();
      this.menuList = data;
      // console.log(this.menuList);
    },
    async getEditMenu(id) {
      return await getEditMenu(id);
    },
    async createMenu(type, row) {
      this.$refs.dialog.showDialog = true;
      this.$refs.dialog.type = type;
      this.$refs.dialog.formData.parent_id = row.parent_id;
      // console.log(this.$refs.dialog.formData.parent_id);
      // this.$refs.dialog.formData.id = row.id;
      if (type === "change") {
        let data = await getEditMenu(row.id);
        // console.log(data);
        this.$refs.dialog.showDialog = true;
        data.hidden = data.hidden === 2 ? "是" : "否";
        data.keepalive = data.keepalive === 1 ? "是" : "否";
        data.islink = data.islink === 1 ? "是" : "否";
        this.$refs.dialog.formData = data;
        console.log(this.$refs.dialog.formData);
      }
    },
    async changeSwitch(row, type) {
      // 处理数据
      type = row.hidden === 1 ? 2 : 1;
      await isShowMenu(row.id, type);
      this.$message.success("修改成功");
      // 更细数据
      this.getMenu();
    },
    delMenu(row) {
      this.$confirm("确定删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delMenu(row.id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getMenu();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style>
.btn {
  margin: 15px 0;
}
</style>
